<template>
  <div>
    <TopFilter
      :list="topFilterList"
      :cols="4"
      labelWidth="120"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="zjconfig"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => (this.columns = columns)"
      :isExportExcel="true"
      :isSelectColumn="false"
    >
      <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandle">新增</el-button>
        <!-- <multiuse-button size="small" type="primary" icon="el-icon-plus" :click="addHandle" :auth-list="auths" auth-mark="/api/basedata/vehicleProduct/brands">新增</multiuse-button> -->
        <!-- <el-button size="small">导入</el-button> -->
      </template>
    </FilterTable>
    <BaseDialog
      :visible.sync="emitVisible"
      :title="'基本信息'"
      destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
    >
      <configModel :rowData="formData" @close="closeHandlers" />
    </BaseDialog>
    <BaseDialog
      :visible.sync="addVisible"
      :title="'基本信息'"
      destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
    >
      <configaddModel :rowData="formData" @close="closeHandler" />
    </BaseDialog>
  </div>
</template>

<script>
import {getPackages,getAllbrand,getAllseriess,getAllmodels,getDealerUser} from '@/api/omSale/vehicleParameters/vehicleType/index.js'
import { dictionary } from '@/utils/dictMixin';
import configaddModel from './configaddModel';
import configModel from './configModel';
import Cookies from 'js-cookie';
import { authority } from '@/utils/authMixin';
export default {
  name: 'zjconfig',
  mixins: [dictionary, authority],
  components: {
    configaddModel,
    configModel
  },
  data() {
    this.conf = { add: '新增', edit: '编辑', show: '显示' };
    return {
      topFilterList: this.createTopFilterList(),
      fetchParams: {},
      addVisible: false,
      emitVisible:false,
      fetchApi: getPackages,
      columns: this.createTableColumns(),
      formData: {},
      dealerType: Cookies.get('dealerType')
    };
  },
  created(){
    this.getList();
    this.getUser()
  },
  methods: {
    createTopFilterList() {
      return [

        {
          type: 'SELECT',
          label: '品牌名称',
          fieldName: 'brandId',
          placeholder: '请输入...',
          itemList:[],
          change:p=>{
            if(p){
              this.topFilterList.map(x=>{
                if(x.fieldName=='seriesId'){
                  x.itemList=[];
                  x.initialValue=''
                }
                if(x.fieldName=='modelId'){
                  x.itemList=[];
                  x.initialValue=''
                }
              })
              this.getSeries(p)
            }else{
              this.topFilterList.map(x=>{
                if(x.fieldName=='seriesId'){
                  x.itemList=[];
                  x.initialValue=''
                }
                if(x.fieldName=='modelId'){
                  x.itemList=[];
                  x.initialValue=''
                }
              })
            }
          }
        },
        {
          type: 'SELECT',
          label: '车系名称',
          fieldName: 'seriesId',
          placeholder: '请输入...',
          itemList: [],
          change:p=>{
            if(p){
              this.topFilterList.map(x=>{
                if(x.fieldName=='modelId'){
                  x.itemList=[];
                  x.initialValue=''
                }
              })
              this.getModel(p)
            }else{
              this.topFilterList.map(x=>{
                if(x.fieldName=='modelId'){
                  x.itemList=[];
                  x.initialValue=''
                }
              })
            }
          }
        },
        {
          type: 'SELECT',
          label: '车型名称',
          fieldName: 'modelId',
          placeholder: '请选择...',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '启用标记',
          fieldName: 'isValid',
          placeholder: '请选择...',
          itemList:this.createDictList('1004')
        },

        {
          type: 'INPUT',
          label: '配置名称',
          fieldName: 'configName',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '配置代码',
          fieldName: 'configCode',
          placeholder: '请输入...'
        },
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 60,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <multiuse-button
                  size="mini"
                  type="text"
                  onClick={() => this.editHandle(props.row)}

                >
                  编辑
                </multiuse-button>
              </div>
            );
          }
        },


        {
          title: '品牌名称',
          dataIndex: 'brandName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系名称',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '车型名称',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配置代码',
          dataIndex: 'configCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配置名称',
          dataIndex: 'configName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '启用标记',
          dataIndex: 'isValid',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          dictItems: this.createDictList('1004'),
          render: props => {
            return <span >{this.createDictText(props.row.isValid, '1004')}</span>;
          }
        },
        {
          title: '启用日期',
          dataIndex: 'startDate',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '创建人',
          dataIndex: 'createdBy',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          editType: 'select',
          editItems: []
        },
        {
          title: '创建日期',
          dataIndex: 'createdAt',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
      ];
    },
    async getList(){
      let res=await getAllbrand()
      this.topFilterList.find(x=>x.fieldName=='brandId').itemList=res.data.map(x=>({text:x.brandName,value:x.brandId}))
    },
    async getSeries(brandId){

      let res=await getAllseriess({brandId:brandId})
      this.topFilterList.find(x=>x.fieldName=='seriesId').itemList=res.data.map(x=>({text:x.seriesName,value:x.seriesId}))
    },
    async getModel(seriesId){
      let str=this.topFilterList.find(x=>x.fieldName=='brandId').initialValue;
      let res=await getAllmodels({brandId:str,seriesId:seriesId})
      this.topFilterList.find(x=>x.fieldName=='modelId').itemList=res.data.map(x=>({text:x.modelName,value:x.modelId}))
    },
    addHandle() {
      this.addVisible=true;
    },
    editHandle(row) {
      this.formData = row;
      this.emitVisible = true;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    closeHandler(val, type) {
      this.addVisible=false;
      if(val){
        this.fetchParams = { ...this.fetchParams };
      }
    },
    closeHandlers(val, type) {
      this.emitVisible=false;
      if(val){
        this.fetchParams = { ...this.fetchParams };
      }
    },
    async getUser(){
      let res=await getDealerUser()
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      this.columns.find(item => item.dataIndex === 'createdBy').editItems = empList; //操作姓名
      this.columns.find(item => item.dataIndex === 'createdBy').filterItems = empList;
    },
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  }
};
</script>

<style lang="less" scoped></style>
